<template>
  <div class="buy">
    <!-- 头部 -->
    <div class="my_header">
      <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
      <div class="top1">购买套餐</div>
    </div>
    <!-- 套餐分类 -->
    <ul>
      <li class="list" :class="item.package_id==choiceId?'active':''" v-for="(item,index) in personalList"
          :key='item.package_id' v-if="$store.state.userType == 1"
          @click="choicePackage(item.package_id,item.money,'personal')">
        <div class="one">{{item.name}}</div>
        <div class="price">
          <span class="danjia">￥</span><span class="money">{{item.money}}</span>
          <!-- 分割线 -->
          <div class="line"></div>
        </div>
        <p class="number">可查询{{item.number}}次</p>
        <!-- 选中套餐时显示 -->
        <img class="select" src="static/icon_pc/icon/icon_select.png" alt="" v-show="item.package_id==choiceId">
      </li>
      <li class="list" :class="item.package_id==choiceId?'active':''"
          :style="$store.state.userType == 1?'opacity:0.4':''" v-for="(item,index) in enterpriseList"
          :key='item.package_id'
          @click="choicePackage(item.package_id,item.money,'enterprise')">
        <div class="one">{{item.name}}</div>
        <div class="price">
          <span class="danjia">￥</span><span class="money">{{item.money}}</span>
          <!-- 分割线 -->
          <div class="line"></div>
        </div>
        <p class="number">可查询{{item.number}}次</p>
        <!-- 选中套餐时显示 -->
        <img class="select" src="static/icon_pc/icon/icon_select.png" alt="" v-show="item.package_id==choiceId">
      </li>
    </ul>
    <!-- 确定按钮 -->
    <van-button class="button" size="large" @click="choicePackageSure()">确定</van-button>
    <div class="enterprise-interests">
      <br/>
      <h4>完成企业认证可获得如下权益：</h4>
      <br/>
      <div>1、免费向失信前员工追偿企业损失；</div>
      <br/>
      <div>2、免费获得5次查询机会；</div>
      <br/>
      <div>3、每上传1份黑名单免费获得10次查询机会；</div>
      <br/>
      <div>4、更优惠的企业查询套餐。</div>
    </div>

    <v-pay :isShowPayType="isShowPayType" :money="money" :choiceId="choiceId" @hidePay="hidePay"></v-pay>
  </div>
</template>
<script>
  import vPay from '@/common/pay';

  export default {
    data() {
      return {
        isShowPayType: false,
        enterpriseList: [],
        personalList: [],
        choiceId: '',    //选中的套餐id
        money: 9.9,    //选中的套餐金额
      }
    },
    components: {vPay},
    created() {
      this.getUserType();
      this.getUserPersonalPackage();
      this.getEnterPrisePackage();
    },
    methods: {
      hidePay() {
        this.isShowPayType = false;
      },
      choicePackage(dataId, money, userType) {  //选择套餐
        if (userType === 'enterprise') {
          if (this.$store.state.userType == 1) {
          } else {
            this.choiceId = dataId;
            this.money = parseFloat(money);
          }
        } else {
          this.choiceId = dataId;
          this.money = parseFloat(money);
        }
      },
      choicePackageSure() {   //点击确定按钮
        this.isShowPayType = true;
      },
      getUserPersonalPackage() {   //获取个人套餐信息
        this.$http.get('api/Welcome/package').then(response => {
          console.log('个人套餐');
          console.log(response.data)
          this.personalList = response.data;
          this.choiceId = this.personalList[0].package_id;
          this.money = this.personalList[0].money;
        }).catch(error => {

        });
      },
      getEnterPrisePackage() {   //获取企业套餐信息
        this.$http.get('api/Welcome/package2').then(response => {
          console.log('企业套餐');
          console.log(response.data)
          this.enterpriseList = response.data;
        }).catch(error => {

        });

      },
      getUserType() {
        this.$http.get('api/User/index').then(response => {
          this.$store.commit('setUserType', response.data.type);
        })
      },
    }

  }
</script>
<style scoped>
  .enterprise-interests {
    color: red;
    margin: 0 0 0 0.3rem;
  }

  .enterprise-interests h4 {
    color: red;
    text-align: left;
  }

  .buy {
    width: 100%;
  }

  .zhe {
    width: 100%;
    height: 100%;
    background: black;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.4;
    z-index: 1
  }

  /* 头部 */

  .my_header {
    width: 100%;
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: .88rem;
    /* position: relative; */
    position: fixed;
    top: 0rem;
    left: 0rem;
    padding: 0 .2rem;
  }

  .my_header i {
    font-size: .4rem;
    float: left;
    line-height: .88rem;
  }

  .boxs {
    width: 100%;
    height: 4.2rem;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    border-radius: 25px 25px 0px 0px;
    z-index: 9
  }

  .top1 {
    display: inline-block;
    margin-left: -.25rem
  }

  /* 支付方式 */

  .boxs .lines {
    width: 1.6rem;
    height: .1rem;
    background: rgba(204, 204, 204, 1);
    border-radius: 5px;
    position: absolute;
    top: .2rem;
    left: 50%;
    margin-left: -.8rem;
  }

  .boxs h4 {
    font-size: .3rem;
    color: #333;
    position: absolute;
    top: 25%;
    left: .3rem;
  }

  .count {
    margin-top: 17%;
  }

  .count li {
    float: left;
  }

  .count li:nth-child(2) {
    margin: 0;
    margin-left: .15rem;
    margin-right: .15rem;
  }

  .count li img {
    width: 2.2rem;
    height: .88rem;
  }

  .spanyebz {
    color: red;
    margin: -0.06rem 0px 0.2rem .35rem;
    font-size: 0.18rem;
  }

  /* 总计 */

  .total {
    height: .88rem;
    line-height: .88rem;
    width: 100%;
    border-top: .01rem solid #ccc;
    position: fixed;
    bottom: 0;
  }

  .total .tol {
    float: left;
    padding-left: 0.3rem;
  }

  .all {
    font-size: .3rem;
    color: #333;
  }

  .all .peo {
    color: #ff3000;
  }

  #btn {
    display: block;
    width: 2.2rem;
    height: .88rem;
    color: #fff;
    font-size: .3rem;
    line-height: .88rem;
    text-align: center;
    border: none;
    background-color: #0085f0;
    border-radius: 0;
    float: right;
  }

  /* 头部结束 */
  /* 套餐分类开始 */

  ul {
    width: 100%;
    background-color: #fff;
    padding: .3rem;
    overflow: hidden;
    margin-top: .88rem;
  }

  .list {
    width: 31.6%;
    height: 2.8rem;
    text-align: center;
    position: relative;
    float: left;
    margin-bottom: .15rem;
    border: .01rem solid #ccc;
  }

  .list:nth-child(3n-1) {
    margin: 0 .15rem 0 .15rem;
  }

  .one {
    height: .26rem;
    font-size: .28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 36px;
  }

  .price {
    margin-top: .39rem;
    line-height: 36px;
  }

  .price .danjia {
    font-size: .22rem;
    color: #999;
    padding-right: .05rem;
  }

  .price .money {
    color: #FF3000;
    font-size: .5rem;
    height: .38rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
  }

  .line {
    width: 1.8rem;
    border-top: .0001rem dashed #ccc;
    position: absolute;
    top: 70%;
    left: 50%;
    margin-left: -.9rem;
  }

  .number {
    height: .21rem;
    font-size: .22rem;
    color: #999;
    font-weight: 500;
    line-height: .36rem;
    padding-top: .7rem;
  }

  .active {
    border: .01rem solid #0085F0;
  }

  .select {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  /* 套餐分类结束 */
  /* 确定按钮 */

  .button {
    font-size: .3rem;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
    color: #fff;
    position: absolute;
    bottom: 0;
    /* 解决1px边框问题 */
    border: .01rem;
    background-color: #0085F0;
  }

  /* 余额支付弹窗 */

  .paybox {
    width: 5.61rem;
    height: 5.69rem;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -2.8rem;
    padding: 0 .3rem;
    background-color: #fff;
    z-index: 999;
  }

  .paybox .paytop {
    height: 1rem;
    line-height: 1rem;
  }

  .paybox .colse {
    width: .23rem;
    height: .23rem;
    border: .001rem dashed #efefef;
  }

  .paied {
    margin-left: 36%;
    font-size: .36rem;
    font-weight: bold;
    color: #333;
  }

  .paybox .makepsd {
    float: right;
    color: #1B84E3;
    font-size: .3rem;
  }

  .paybox .money {
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    color: #333;
    font-size: .72rem;
    font-weight: bold;
  }

  .paybtn {
    width: 100%;
    height: .95rem;
    color: #fff;
    font-size: .36rem;
    text-align: center;
    background-color: #16AD12;
    margin-top: .3rem;
  }
</style>
